<template>
    <div id="cart">
        <div class="head">
            <router-link to="/mine">
                <i class='iconfont'>&#xe640;</i>
            </router-link> 
            <span class='title'>我的购物车</span>
        </div>

        <ul id="wrapper">
                
            <li class="clearfix" v-for="item in cartlist">
                <span><img :src="'http://127.0.0.1:2000/'+item.img" alt=""/></span>
                <div class="cont">
                    <p class="tit">{{item.title}}</p>
                    <p><span>月售117份</span><span>好评率100%</span></p>
                    <p class="money"><strong>￥<span class="dj">{{item.price}}</span><del>¥{{item.old_price}}</del></strong></p>
                    <div class="iconfont icon-zengjia"></div>
                    <input class="num" type="text" value="1"></input>
                    <div class="iconfont icon-jianshao"></div>
                    <div class="allprice">总价：¥<span class="count">{{item.price}}</span></div>
                </div>
            </li>
        </ul>

        <div class="all">
            共 <span class="nums">{{nums}}</span>  件商品 购物车总金额：￥ <span class="moneys">{{moneys}}</span> 元
        </div>
    </div>
</template>


<script>

import $ from 'jquery';
    export default {
        name: 'cart',
        data(){
            return{
                userid:JSON.parse(sessionStorage.getItem("user_info"))._id,
                cartlist:[],
                nums:0,
                moneys:0
            }
        },
        methods:{
            
        },
        computed:{

        },
        mounted(){   
            var that=this;
            var lists=JSON.parse(localStorage.getItem("cartlist"));  //将当前用户的购物车列表push到list中
                for(var i=0;i<lists.length;i++){
                    if(lists[i].aid==this.userid){
                        this.cartlist.push(lists[i]);
                    }
                }


            this.$nextTick(function () {  //在修改数据后调用this.$nextTick，首次加载在mounted函数里面调用this.$nextTick,此时能拿到动态渲染的dom节点
                //dom已更新
               
                var del=$(".icon-jianshao");   //减
                $.each(del,function(index,ele){ //遍历jq对象

                    $(ele).click(function(){  //当前点击的元素
                        var num=$($(".num").get(index)).val();
                        var mon=parseInt($($(".dj").get(index)).html());
                        if(num==1){
                            num=1;
                            $(this).removeClass("col");
                        }
                        else{
                            num--;
                            $(this).addClass("col");
                        }
                        $($(".num").get(index)).val(num);
                        var count=num*mon;
                        $($(".count").get(index)).html(count)
                    })
                
                })

                 var adds=$(".icon-zengjia");   //加
                $.each(adds,function(index,ele){ //遍历jq对象

                    $(ele).click(function(){  //当前点击的元素
                        var num=$($(".num").get(index)).val();
                        var mon=parseInt($($(".dj").get(index)).html());
                        num++;
                        if(num>1){
                             $(del[index]).addClass("col");
                        }
                        $($(".num").get(index)).val(num);
                        var count=num*mon;
                        $($(".count").get(index)).html(count);

                    })
                
                })


                //总数
                var inputs=document.getElementsByClassName("num");
                for(var i=0;i<inputs.length;i++){
                    that.nums+=parseInt(inputs[i].value);
                }
                //总价
                var total=document.getElementsByClassName("count");
                for(var i=0;i<total.length;i++){
                    that.moneys+=parseInt(total[i].innerHTML);
                }
            })
        }
    }
</script>